<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0065)http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS Vertical Centre</title>
<style media="all" type="text/css">

html, body	{height:100%; margin:0; padding:0;}

html		{font-size:0.75em;}

.column		{float:left; width:19.5%; background-color:#B0C953; height:100%; border-right:2px dashed #fff; position:relative;}

.content	{background-color:#fff; padding:20px; margin:10px; display:block;}

.label		{position:absolute; padding:10px; background-color:#fff; opacity:0.4; margin:5px;}
.label:hover	{opacity:0.7;}
.label p	{margin:0.2em; padding:0;}

.good		{color:#009900;}
.bad		{color:#FF3300;}

#wrapper1	{display:table; /*position:static;*/ height:85%; padding:3.7em 10px 10px 10px;}
#middle1	{display:table-cell; vertical-align:middle; /*position:static;*/ background-color:#DDF879;}

#content2	{position:absolute; top:50%; margin-top:-120px; height:240px;}

#floater3	{float:left; height:50%; margin-bottom:-120px; width:100%; background-color:#DDF879;}
#content3	{clear:both; height:240px; /*z-index:32;*/ position:relative;}

#content4	{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%;}

#content5	{line-height:10em; height:10em;}


code		{background-color:#ddd; padding:3px; line-height:1.7em;}
ul			{margin:0; padding:0; padding-left:1em;}

#credit		{position:absolute; bottom:0; right:0; opacity:0.8;}

</style>
</head>
<body style="position: static;">
<div class="column">
<div class="label" style="top:10px; left:20px;">
<code>display:table;</code>
</div>
<div class="label" style="top:70px; left:20px;">
<code>
display:table-cell;<br>
vertical-align:middle;
</code>
</div>
<div id="wrapper1">
<div id="middle1">
<div class="content">
<ul>
<li class="good">Everything in this table cell div is centred</li>
<li class="good">It can dynamically change to any height based on content (try by changing your browser font size)</li>
<li class="good">Doesn’t get cut off when there isn't enough room</li>
<li class="bad">Doesn’t work in Internet Explorer</li>
<li class="bad">Uses 2 extra <code>div</code>s</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="label">
Any object, with relative positioning
</div>
<div class="content" id="content2">
<p><code>positoin:absolute; top:50%; height:240px; margin-top:(negative half the height);</code></p>
<ul>
<li class="good">Works in all browsers</li>
<li>Fixed height object (can be ems)</li>
<li class="bad">Gets cut off when there isn't enough space</li>
<li class="good">Doesn't require additional objects</li>
</ul>
</div>
</div>
<div class="column">
<div class="label">
<code>
float:left;<br>
height:50%;<br>
margin-bottom:-120px;
</code>
</div>
<div id="floater3"></div>
<div id="content3" class="content">
<p><code>position:relative; clear:left; height:240px;</code></p>
<ul>
<li class="good">Works in all browsers</li>
<li>Fixed Height (can be ems)</li>
<li class="good">Doesn't get cut off when there isn't enough space</li>
<li class="bad">Uses 1 extra empty <code>div</code> (not too bad)</li>
</ul>
</div>
</div>
<div class="column">
<div class="label">
Any object, with relative positioning
</div>
<div id="content4" class="content">
<p><code>top:0; bottom:0; left:0; right:0; <br>position:absolute; margin:auto; <br>height:something; width:something;</code></p>
<ul>
<li>Must have a fixed width and height</li>
<li class="bad">This doesn't work in Internet Explorer</li>
<li class="bad">Gets cut off when there isn't enough space</li>
</ul>
</div>
</div>
<div class="column">
<div class="content" id="content5">
Single Line
</div>
<div class="label">
<p><code>line-height:10em; height:10em;</code></p>
<ul>
<li>Only used to centre a single line of text</li>
<li>Container must have fixed height (can be em, can't be %)</li>
<li>(very useful for making buttons)</li>
<li class="good">Works in all browsers</li>
<li class="good">Doesn't get cut off when the isn't enough space</li>
<li class="bad">When there is more than a single line, it breaks badly</li>
</ul>
</div>
</div>
<div id="credit" class="label">
<p>By <a href="http://douglasheriot.com/">Douglas Heriot</a> 2008</p>
<p>For <a href="http://nettuts.com/">NetTuts.com</a></p>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="./CSS Vertical Centre_files/ga.js.下载" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4512877-2");
pageTracker._trackPageview();
} catch(err) {}</script>

<audio controls="controls" style="display: none;"></audio></body><style type="text/css">#yddContainer{display:block;font-family:Microsoft YaHei;position:relative;width:100%;height:100%;top:-4px;left:-4px;font-size:12px;border:1px solid}#yddTop{display:block;height:22px}#yddTopBorderlr{display:block;position:static;height:17px;padding:2px 28px;line-height:17px;font-size:12px;color:#5079bb;font-weight:bold;border-style:none solid;border-width:1px}#yddTopBorderlr .ydd-sp{position:absolute;top:2px;height:0;overflow:hidden}.ydd-icon{left:5px;width:17px;padding:0px 0px 0px 0px;padding-top:17px;background-position:-16px -44px}.ydd-close{right:5px;width:16px;padding-top:16px;background-position:left -44px}#yddKeyTitle{float:left;text-decoration:none}#yddMiddle{display:block;margin-bottom:10px}.ydd-tabs{display:block;margin:5px 0;padding:0 5px;height:18px;border-bottom:1px solid}.ydd-tab{display:block;float:left;height:18px;margin:0 5px -1px 0;padding:0 4px;line-height:18px;border:1px solid;border-bottom:none}.ydd-trans-container{display:block;line-height:160%}.ydd-trans-container a{text-decoration:none;}#yddBottom{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;overflow:hidden;background-position:left -22px}.ydd-padding010{padding:0 10px}#yddWrapper{color:#252525;z-index:10001;background:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ab20.png);}#yddContainer{background:#fff;border-color:#4b7598}#yddTopBorderlr{border-color:#f0f8fc}#yddWrapper .ydd-sp{background-image:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ydd-sprite.png)}#yddWrapper a,#yddWrapper a:hover,#yddWrapper a:visited{color:#50799b}#yddWrapper .ydd-tabs{color:#959595}.ydd-tabs,.ydd-tab{background:#fff;border-color:#d5e7f3}#yddBottom{color:#363636}#yddWrapper{min-width:250px;max-width:400px;}</style></html>